<template>
  <div class="custom-table-list-wrapper">
    <div class="search" :class="{ active: toggleSearchStatus }">
      <div>
        <el-button type="primary" @click="handleAdd('新增用户')"
          ><svg-icon name="add" size="15px" />新增用户</el-button
        >
        <el-button @click="handleDelete"
          ><el-icon style="margin-right: 5px"><Delete /></el-icon>
          移除</el-button
        >
      </div>
      <el-input
        class="search-input"
        v-model="searchParams.keywords"
        placeholder="请输入用户名、真实姓名"
        :suffix-icon="Search"
        @keyup.enter="initTableList(1)"
      ></el-input>
    </div>
    <div class="content">
      <div class="content-table">
        <el-table
          class="custom-table"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="60px" />
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="loginName" label="用户名" />
          <el-table-column prop="userName" label="真实姓名" />
          <el-table-column prop="deptName" label="部门" />
          <el-table-column prop="roleName" label="角色" />
          <el-table-column prop="userPhone" label="手机号码" />
          <el-table-column label="操作" width="80px">
            <template #default="scope">
              <el-button link type="danger" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="content-page">
        <el-pagination
          class="custom-pagination"
          :current-page="paginationParams.pageIndex"
          :page-size="paginationParams.pageSize"
          background
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="initTableList"
        />
      </div>
    </div>
    <UserChooseDialog
      ref="userChooseDialogRef"
      :roleId="roleId"
      @close="handleClose"
    />
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { useTableList } from '@/hooks/useTableList'
import { ElMessage, ElMessageBox } from 'element-plus'
import UserChooseDialog from './userChooseDialog.vue'
import { getUserList } from '@/api/manager/systemManage/user.js'
import { roleDeleteUser } from '@/api/manager/systemManage/role.js'
import { Delete } from '@element-plus/icons-vue'
const props = defineProps({
  roleId: {
    type: String,
  },
})
const searchParams = ref({
  roleId: '',
  keywords: '',
})
const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  detailRef,
  currentDetail,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, getUserList, roleDeleteUser)

watch(
  () => props.roleId,
  (newVal) => {
    if (newVal) {
      searchParams.value.roleId = newVal
      initTableList(1)
    }
  },
  {
    immediate: true,
  },
)
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
const userChooseDialogRef = ref()
const handleAdd = () => {
  userChooseDialogRef.value.dialogVisible = true
}
// 删除
const handleDelete = (row) => {
  if (!row && multipleSelection.value.length === 0) {
    ElMessage.warning('请先勾选用户')
    return
  }
  ElMessageBox.confirm('是否确定删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const userIds = row.pkid
        ? [row.pkid]
        : multipleSelection.value.map((i) => {
            return i.pkid
          })
      const params = { roleId: props.roleId, userIds: userIds }
      const res = await roleDeleteUser(params)
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        initTableList(1)
      } else {
        ElMessage.error(res.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}
onMounted(() => {})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';

.content-table {
  height: calc(100% - 50px) !important;
}
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}
</style>
